import { ref, onMounted, onUnmounted } from 'vue';

export type Breakpoint = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl';

// 断点定义（参考Arco Design的断点设置）
const breakpoints = {
  xs: 0,     // 手机
  sm: 576,   // 平板
  md: 768,   // 小屏幕电脑
  lg: 992,   // 中等屏幕电脑
  xl: 1200,  // 大屏幕电脑
  xxl: 1600, // 超大屏幕
};

export function useBreakpoint() {
  const breakpoint = ref<Breakpoint>('md');
  
  const updateBreakpoint = () => {
    const width = window.innerWidth;
    
    if (width < breakpoints.sm) {
      breakpoint.value = 'xs';
    } else if (width < breakpoints.md) {
      breakpoint.value = 'sm';
    } else if (width < breakpoints.lg) {
      breakpoint.value = 'md';
    } else if (width < breakpoints.xl) {
      breakpoint.value = 'lg';
    } else if (width < breakpoints.xxl) {
      breakpoint.value = 'xl';
    } else {
      breakpoint.value = 'xxl';
    }
  };
  
  onMounted(() => {
    updateBreakpoint();
    window.addEventListener('resize', updateBreakpoint);
  });
  
  onUnmounted(() => {
    window.removeEventListener('resize', updateBreakpoint);
  });
  
  return {
    breakpoint,
    isMobile: () => breakpoint.value === 'xs',
    isTablet: () => breakpoint.value === 'sm',
    isDesktop: () => ['md', 'lg', 'xl', 'xxl'].includes(breakpoint.value),
    isLargeScreen: () => ['xl', 'xxl'].includes(breakpoint.value),
  };
} 